<template>
    <div class="e-select-rank-main required" @mouseleave="mouseLeave">
        <div class="input" @click="openValue">
            <div class="showTags">
                <span v-if="!newSelectData.relateName">选择关联</span>
                <div class="tag-item" v-else>
                    {{newSelectData.relateName}}
                </div>
            </div>
            <img src="@assets/arrow-down.png" alt="">
        </div>
        <div class="options-list" v-show="show">
            <ul class="classify">
                <li v-for="(item, index) in tableData"
                    :key="item.name"
                    @mouseenter="handleTab(item, index)"
                    :class="hoverIndex == index ? 'hoverStyle' : ''"
                >
                    {{item.name}}
                </li>
            </ul>
            <ul class="topic">
                <div class="search">
                    <input type="text" v-model="keyWord" :placeholder="placeholder">
                    <button class="submit" @click="getSearchList" @keyup.enter="getSearchList">搜索</button>
                </div>
                <div class="close" @click="closeSearch" v-if="isSearch">
                    <img src="@assets/searchClose.png" alt="">
                </div>
                <template v-if="!isSearch">
                    <li @click="getValue(index,item)" v-for="(item,index) in relateList[hoverIndex]"
                        :key="item.relateId"
                        :class="item.selected ? 'active' :''">
                        {{item.relateName}}
                    </li>
                </template>
                <template v-else>
                    <li @click="getValue(index,item)" v-for="(item,index) in searchList"
                        :key="item.relateId"
                        :class="item.selected ? 'active' :''">
                        {{item.relateName}}
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
    import EInput from './EInput'
    
    export default {
        name: "SelectBtn",
        data() {
            return {
                show: false,
                newSelectData: this.selectData,
                hoverIndex: 0,
                isSearch: false,
                relateList: [],
                searchList: [],
                keyWord: '',
                placeholder: '搜索国家/地区',
                tableData: [
                    {name: '国家/地区', type: 'country'},
                    {name: '城市', type: 'city'},
                    {name: '学校', type: 'school'}
                ],
                relateType: 'country',
            }
        },
        components: {
            EInput
        },
        props: {
            selectData: {
                type: Object,
                default: () => {
                }
            },
        },
        watch: {
            selectData(newValue) {
                this.newSelectData = newValue
            },
            newSelectData(newValue) {
                this.$emit('getRelate', newValue)
            }
        },
        created() {
            this.getRelateList()
    
            let self = this
            document.onkeydown = function (event) {
                var e = event || window.event;
                if (e && e.keyCode == 13) { //回车键的键值为13
                    self.getSearchList()
                }
            }
        },
        methods: {
            getRelateList() {
                this.$axios({actionName: 'bbs.article.relate', type: this.relateType, pageSize: 50}).then(res => {
                    this.$set(this.relateList, this.hoverIndex, res.data.list)
                })
            },
            getSearchList() {
                console.log(11111)
                if (!this.keyWord) {
                    return
                }
                this.$axios({
                    actionName: 'bbs.article.relate',
                    type: this.relateType,
                    pageSize: 50,
                    keyWord: this.keyWord
                }).then(res => {
                    this.isSearch = true
                    this.searchList = [].concat(res.data.list)
                })
            },
            openValue() {
                this.show = !this.show
            },
            getValue(index, item) {
                if (item.relateType == 'country') {
                    item.countryId = item.relateId
                } else if (item.relateType == 'city') {
                    item.cityId = item.relateId
                } else if (item.relateType == 'school') {
                    item.schoolId = item.relateId
                }
                console.log(item)
    
                this.newSelectData = {...item}
                this.show = !this.show
            },
            handleTab(item, index) {
                this.hoverIndex = index
                this.relateType = item.type
                this.isSearch = false
                this.keyWord = ''
                this.placeholder = '搜索' + item.name
                if (!this.relateList[this.hoverIndex]) {
                    this.getRelateList()
                }
            },
            mouseLeave() {
                this.hoverIndex = 0
                this.show = false
                this.isSearch = false
                this.keyWord = ''
                this.relateType = 'country'
            },
            closeSearch() {
                this.isSearch = false
            }
        }
    }
</script>

<style lang="less" scoped>
    .e-select-rank-main {
        position: relative;
        height: 40px;
        width: 260px;
        margin-left: 21px;
        cursor: default;
    }
    
    .input {
        height: 40px;
        width: 260px;
        position: relative;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .04);
        padding-left: 16px;
        
        img {
            position: absolute;
            width: 10px;
            height: auto;
            right: 14px;
            top: 45%;
        }
        
        .showTags {
            height: 40px;
            font-size: 14px;
            /*font-weight: bold;*/
            .flexed(flex-start, center);
            
            span {
                cursor: default;
                color: rgba(0, 0, 0, .4);
            }
            
            .tag-item {
                font-size: 14px;
            }
        }
    }
    
    .options-list {
        position: absolute;
        .flexed(flex-start, top);
        height: 300px;
        width: 260px;
        background-color: #fff;
        overflow: auto;
        cursor: pointer;
        z-index: 999;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        
        .classify {
            width: 80px;
            background: rgba(0, 0, 0, .04);
            
            li {
                width: 100%;
                height: 40px;
                cursor: pointer;
                line-height: 40px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                
                /*&:hover {
                    background: #ffdc20;
                }*/
            }
            
            .hoverStyle {
                background: #ffdc20;
            }
        }
        
        .topic {
            width: 180px;
            height: 300px;
            padding-top: 48px;
            overflow-y: auto;
            position: relative;
            
            .close {
                position: fixed;
                top: 40px;
                right: 8px;
                width: 14px;
                height: 14px;
                
                img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }
            
            .search {
                position: fixed;
                top: 0;
                background-color: #fff;
                input {
                    width: 120px;
                    height: 30px;
                    margin: 4px;
                    border-radius: 4px;
                    background: rgba(0, 0, 0, .04);
                    border: none;
                    outline: none;
                }
            }
            
            li {
                width: 100%;
                height: 40px;
                cursor: pointer;
                line-height: 40px;
                font-size: 14px;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                
                &:hover {
                    background-color: rgba(0, 0, 0, .04);
                }
            }
            
            .submit {
                border: none;
                height: 30px;
                width: 34px;
                text-align: center;
                border-radius: 4px;
                outline: none;
                background: rgba(255, 220, 32, 1);
            }
        }
        
        .active {
            color: #ffdc20 !important;
            font-weight: bold !important;
        }
    }
    
    .required {
        position: relative;
    }
    
    .required::before {
        position: absolute;
        top: 18px;
        left: -20px;
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(250, 100, 0, 1);
    }
</style>
